<!-- 
    Created by 2024-11-07
    Author: CH_ywx
    Description: 小米官网首页
    Powered by CH_ywx
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 支持移动端浏览器缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Xiaomi SU7，Xiaomi 14 Ultra，小米澎湃OS，小米徕卡影像大赛</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./dist/css/bootstrap.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./dist/jquery/jquery.min.js"></script>
    <script src="./dist/js/bootstrap.js"></script>
</head>
<body>
    <!-- 登录模态框 -->
    <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="exampleModalLabel">登录小米</h4>
            </div>
            <div class="modal-body">
              <form>
                <div class="form-group">
                  <label for="recipient-name" class="control-label">手机号:</label>
                  <input type="text" class="form-control" id="recipient-name">
                </div>
                <div class="form-group">
                  <label for="message-text" class="control-label">密码:</label>
                  <input type="password" class="form-control" id="recipient-name">
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" class="btn btn-primary" id="loginBtn">登录</button>
            </div>
          </div>
        </div>
      </div>
    <!-- 导航条 -->
    <nav class="navbar navbar-fixed-top" id="mainNav">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="index.html">
                <img src="./images/logo-mi2.png" alt=""></img>
            </a>
          </div>
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li><a href="./index.html" class="nav-item nav-active-item">小米官网</a></li>
              <li><a href="./store.html" class="nav-item">小米商城</a></li>
              <li><a href="#" class="nav-item">小米澎湃OS</a></li>
              <li><a href="#" class="nav-item">小米汽车</a></li>
              <li><a href="#" class="nav-item">小米影像</a></li>
              <li><a href="./miservice.html" class="nav-item" target="_blank">云服务</a></li>
              <li><a href="#" class="nav-item">IoT</a></li>
              <li><a href="#" class="nav-item">有品</a></li>
              <li><a href="./xiaoai.html" class="nav-item">小爱开放平台</a></li>
              <li><a href="#" class="nav-item">Location</a></li>
              <li><a href="./projectInfo.html" class="nav-item">答辩信息</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#" class="nav-item" data-toggle="modal" data-target="#loginModal">登录</a></li>
              <li><a href="#" class="nav-item">|</a></li>
              <li><a href="#" class="nav-item">注册</a></li>
            </ul>
          </div>
        </div>
      </nav>
    <!-- banner -->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <a href="">
                <img src="./images/banner1.jpeg" alt="小米SU7">
            </a>
            <div class="carousel-caption">
            </div>
          </div>
          <div class="item">
            <a href="">
                <img src="./images/banner2.jpeg" alt="小米SU7">
            </a>
            <div class="carousel-caption">
            </div>
          </div>
          <div class="item">
            <a href="">
                <img src="./images/banner3.jpeg" alt="小米15系列">
            </a>
            <div class="carousel-caption">
            </div>
          </div>
          <div class="item">
            <a href="">
                <img src="./images/banner4.jpeg" alt="澎湃OS">
            </a>
            <div class="carousel-caption">
            </div>
          </div>
        </div>
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    
      <!-- 展示内容 -->
      <div class="content">
        <a>
            <img src="./images/banner3.jpeg" class="img-responsive" alt="Responsive image">
        </a>
        <img class="split" src="./images/split.jpeg" alt="">
        <a>
            <img class="img-responsive" src="./images/banner4.jpeg" alt="Responsive image">
        </a>
        <img class="split" src="./images/split.jpeg" alt="">
        <!-- banner -->
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
            <div class="item active">
                <a href="">
                    <img src="./images/banner3.jpeg" alt="小米15系列">
                </a>
                <div class="carousel-caption">
                </div>
            </div>
            <div class="item">
                <a href="">
                    <img src="./images/banner4.jpeg" alt="澎湃OS">
                </a>
                <div class="carousel-caption">
                </div>
            </div>
            </div>
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
            </a>
        </div>
        <img class="split" src="./images/split.jpeg" alt="">
        <!-- banner -->
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
            <div class="item active">
                <a href="">
                    <img src="./images/banner5.jpeg" alt="小米手环9Pro">
                </a>
                <div class="carousel-caption">
                </div>
            </div>
            <div class="item">
                <a href="">
                    <img src="./images/banner6.jpeg" alt="小米WatchS4">
                </a>
                <div class="carousel-caption">
                </div>
            </div>
            </div>
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
            </a>
        </div>
        <img class="split" src="./images/split.jpeg" alt="">
        <!-- banner -->
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
            <div class="item active">
                <a href="">
                    <img src="./images/banner7.jpeg" alt="红米Note14">
                </a>
                <div class="carousel-caption">
                </div>
            </div>
            <div class="item">
                <a href="">
                    <img src="./images/banner8.jpeg" alt="红米K70至尊版">
                </a>
                <div class="carousel-caption">
                </div>
            </div>
            </div>
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
            </a>
        </div>
        <img class="split" src="./images/split.jpeg" alt="">
        <a><img class="img-responsive" src="./images/banner9.jpeg"></a>
        <img class="split" src="./images/split.jpeg" alt="">
        <a><img class="img-responsive" src="./images/banner10.jpeg"></a>
      </div>
      <!-- 选购区 -->
       <div class="container shop-nav">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-2">
                        <ul class="list-group">
                            <div class="shop-title">
                                <li class="list-group-item">选购指南</li>
                            </div>
                            <br>
                            <div class="shop-item">
                                <li class="list-group-item">手机</li>
                                <li class="list-group-item">电视</li>
                                <li class="list-group-item">平板</li>
                                <li class="list-group-item">穿戴</li>
                                <li class="list-group-item">耳机</li>
                                <li class="list-group-item">家电</li>
                                <li class="list-group-item">路由器</li>
                                <li class="list-group-item">音箱</li>
                                <li class="list-group-item">配件</li>
                            </div>
                          </ul>
                    </div>
                    <div class="col-md-2">
                        <ul class="list-group">
                            <div class="shop-title">
                                <li class="list-group-item">服务中心</li>
                            </div>
                            <br>
                            <div class="shop-item">
                                <li class="list-group-item">申请售后</li>
                                <li class="list-group-item">售后政策</li>
                                <li class="list-group-item">维修服务价格</li>
                                <li class="list-group-item">订单查询</li>
                                <li class="list-group-item">以旧换新</li>
                                <li class="list-group-item">保障服务</li>
                                <li class="list-group-item">防伪查询</li>
                                <li class="list-group-item">F码通道</li>
                            </div>
                          </ul>
                    </div>
                    <div class="col-md-2">
                        <ul class="list-group">
                            <div class="shop-title">
                                <li class="list-group-item">线下门店</li>
                            </div>
                            <br>
                            <div class="shop-item">
                                <li class="list-group-item">小米之家</li>
                                <li class="list-group-item">服务网点</li>
                                <li class="list-group-item">授权体验店/专区</li>
                            </div>
                          </ul>
                    </div>
                    <div class="col-md-2">
                        <ul class="list-group">
                            <div class="shop-title">
                                <li class="list-group-item">关于小米</li>
                            </div>
                            <br>
                            <div class="shop-item">
                                <li class="list-group-item">了解小米</li>
                                <li class="list-group-item">加入小米</li>
                                <li class="list-group-item">投资者关系</li>
                                <li class="list-group-item">可持续发展</li>
                                <li class="list-group-item">廉洁举报</li>
                            </div>
                          </ul>
                    </div>
                    <div class="col-md-2">
                        <ul class="list-group">
                            <div class="shop-title">
                                <li class="list-group-item">关注我们</li>
                            </div>
                            <br>
                            <div class="shop-item">
                                <li class="list-group-item">新浪微博</li>
                                <li class="list-group-item">官方微信</li>
                                <li class="list-group-item">联系我们</li>
                                <li class="list-group-item">共公益基金</li>
                            </div>
                        </ul>
                    </div>
                    <div class="col-md-2">
                        <ul class="list-group">
                            <li class="list-group-item phone-num">400-100-5678</li>
                            <li class="list-group-item message-text">8:00-18:00(仅收市话费)</li>
                            <li class="list-group-item message-text"><img src="./images/person-message.png" style="width: 100px;height: 30px;"></li>
                            <li class="list-group-item phone-num">400-180-8888</li>
                            <li class="list-group-item message-text">8:00-18:00(仅收市话费)</li>
                            <li class="list-group-item message-text">适用于:MIX FOLD、巨屏电视系列</li>
                            <li class="list-group-item message-text"><img src="./images/person-message.png" style="width: 100px;height: 30px;"></li>
                        </ul>
                    </div>
                </div>
            </div>
       </div>
       <img class="split" src="./images/split.jpeg" alt="" srcset="">
       <!-- 网页底部 -->
       <div class="container-fluid footer">
            <div class="container" style="padding-top: 20px;">
                <!-- 行 -->
                <div class="row">
                    <!-- 第一列 logo -->
                    <div class="col-md-1">
                        <img src="./images/logo-mi2.png" style="width: 60px;height: 60px;"></img>
                    </div>
                    <!-- 第二列 超链接组 -->
                    <div class="col-md-11">
                        <!-- 第一行 -->
                        <div class="row">
                            <span><a class="footer-link" href="#">小米商城 |</a></span>
                            <span><a class="footer-link" href="#">小米澎湃OS |</a></span>
                            <span><a class="footer-link" href="#">米家 |</a></span>
                            <span><a class="footer-link" href="#">多看 |</a></span>
                            <span><a class="footer-link" href="#">游戏 |</a></span>
                            <span><a class="footer-link" href="#">音乐 |</a></span>
                            <span><a class="footer-link" href="#">政企服务 |</a></span>
                            <span><a class="footer-link" href="#">小米天猫店 |</a></span>
                            <span><a class="footer-link" href="#">小米集团隐私 |</a></span>
                            <span><a class="footer-link" href="#">小米公司儿童信息保护规则 |</a></span>
                            <span><a class="footer-link" href="#">小米商城隐私政策 |</a></span>
                            <span><a class="footer-link" href="#">小米商城用户协议 |</a></span>
                            <span><a class="footer-link" href="#">问题反馈 |</a></span>
                            <span><a class="footer-link" href="#">Select Location</a></span>
                        </div>
                        <!-- 第二行 -->
                        <div class="row">
                            <span><a class="footer-link" href="#">北京互联网法院法律服务工作站 |</a></span>
                            <span><a class="footer-link" href="#">中国消费者协会 |</a></span>
                            <span><a class="footer-link" href="#">北京市消费者协会</a></span>
                        </div>
                        <!-- 第三行 -->
                         <div class="row">
                            <span class="icp-link">© mi.com 京ICP证110507号 京ICP备10046444号 京公安网备11010802020134号 京网文[2023]0169-004号</span>
                        </div>
                        <!-- 第四行 -->
                        <div class="row">
                            <span class="icp-link">(京) 网械平台备字 (2018) 第0005号 药品医疗器械网络信息服务备案(京)网药械信息备字 (2024)第00478号 营业执照 医疗器械质量公告</span>
                        </div>
                        <!-- 第五行 -->
                        <div class="row">
                            <span class="icp-link">增值电信业务经营许可证编号: 京B2-20180851 网络食品备案经营 京食药网食备202010048 食品经营许可证 新出发京批字第直220280号</span>
                        </div>
                        <!-- 第六行 -->
                        <div class="row">
                            <span class="icp-link">违法和不良信息举报电话: 171-5104-4404 知识产权侵权投诉 本网站所列数据,除特殊说明,所有数据均出自我司实验室测试</span>
                        </div>
                        <!-- 第七行 -->
                        <div class="row" style="margin-top: 5px;">
                            <span><img src="./images/v-logo-2.png" alt="" width="85" height="28" /></span>
                            <span><img src="./images/v-logo-5.png" alt="" width="85" height="28" /></span>
                            <span><img src="./images/v-logo-4.png" alt="" width="85" height="28" /></span>
                            <span><img id="lastFooterImg" src="./images/v-logo-1.png" alt="" width="85" height="28" /></span>
                        </div>
                        <!-- 第八行 -->
                        <div class="row" style="text-align: center;font-family: 隶书;color: #ccc;">
                            <h3>让全球每个人都能带来科技带来的美好生活</h3>
                        </div>
                    </div>
                </div>
            </div>
       </div>
      <script type="text/javascript" src="./js/index.js"></script>
      <script type="text/javascript" src="./js/store.js"></script>
</body>
</html>